<template>
    <div class="content">
        <div ref="charts" style="width: 800px; height: 800px"></div>
    </div>
</template>
  
  
<script>
import * as echarts from "echarts";
import 'echarts-gl' // echarts 3D插件
// -导入的外部 地图文件  下载地址 https://www.isqqw.com/
import jiangxi from "../../assets/jiangxi.json"
export default {
    data() {
        return {
        }
    },
    created() {
        this.$nextTick(() => {
            this.initCharts();
        })
    },
    methods: {
        // -首先初始化地图 对地图进行配置 然后注册地图 最后使用配置
        initCharts() {
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                backgroundColor: '#333',

                // globe: {
                //     show: true,
                //     globeRadius: 120,//地球的半径
                //     globeOuterRadius: 150 ,//地球的外半径
                //     // 背景图
                //     baseTexture: require('../../assets/earth.jpg'),
                //     // 环境贴图
                //     // environment: require('../../assets/earth.jpg'),

                //     // environment: '#000',  // 环境贴图的反射率
                //     baseColor: '#fff',  // 地球基底色
                //     shading: 'realistic',  // 着色效果
                //     heightTexture: require('../../assets/earth.jpg'),  // 高度纹理
                //     displacementScale: 0.1,  // 位移系数
                //     displacementQuality: 'high',  // 渲染精度
                //     displacementTexture: require('../../assets/earth.jpg'),  // 位移纹理
                //     realisticMaterial: {
                //         detailTexture: require('../../assets/earth.jpg'),  // 地面细节纹理
                //         textureTiling: 1,  // 纹理平铺
                //         textureOffset: [0, 0],  // 纹理偏移
                //         roughness: 0.2,  // 粗糙度
                //         metalness: 0.1,  // 金属度
                //     },
                //     light: {  // 光照阴影
                //         main: {
                //             intensity: 5,  // 光照强度
                //             shadow: true,  // 是否显示阴影
                //             shadowQuality: 'high',  // 阴影精度
                //         },
                //         ambient: {
                //             intensity: 0,  // 环境光强度
                //         },
                //     },
                //     atmosphere: {  // 大气层
                //         enable: true,
                //         quality: 'high',  // 精度
                //         radius: 200,  // 半径
                //         brightness: 3,  // 亮度
                //         color: '#1f1f1f',  // 颜色
                //     },
                //     postEffect: {  // 后期特效
                //         enable: true,//是否开启后处理特效
                //         bloom: {
                //             enable: true,//是否开启bloom特效 高光特效
                //             bloomIntensity: 0.5,//高亮区域边界值 0-1
                //         },
                //         SSAO: {//环境光遮蔽
                //             radius: 1,//环境光遮蔽半径
                //             intensity: 1,//环境光遮蔽强度
                //             enable: true,//是否开启环境光遮蔽
                //         },
                //         depthOfField: {//景深特效
                //             enable: false,//是否开启景深特效
                //             focalRange: 10,
                //             fstop: 1,
                //         },
                //         colorCorrection: {//颜色校正
                //             enable: true,//是否开启颜色校正
                //             lookupTexture: '',//颜色校正的LUT贴图
                //         },
                //     },
                //     viewControl: {//视角控制器
                //         autoRotate: true,//是否自动旋转
                //         autoRotateAfterStill: 10,//多少秒后停止自动旋转
                //         autoRotateSpeed: 10,//自动旋转速度
                //         damping: 0.8,//惯性
                //         rotateSensitivity: 0,//旋转灵敏度
                //         zoomSensitivity: 0,//缩放灵敏度
                //         panSensitivity: 0,//平移灵敏度
                //         target: [0, 0, 0],//视角中心点
                //         distance: 300,//视角距离
                //         // minDistance: 40,//视角最小距离
                //         // maxDistance: 200,//视角最大距离
                //         // alpha: 0,//视角绕x轴旋转角度
                //         // beta: 0,//视角绕y轴旋转角度
                //         // minAlpha: -360,//视角绕x轴旋转最小角度
                //         // maxAlpha: 360,//视角绕x轴旋转最大角度
                //         // minBeta: -360,//视角绕y轴旋转最小角度
                //         // maxBeta: 360,//视角绕y轴旋转最大角度
                //         // center: [0, 0, 0],//视角中心点
                //         // animation: true,//是否开启动画
                //         // animationDurationUpdate: 1000,//动画时长
                //         // animationEasingUpdate: 'cubicInOut',//动画缓动效果
                //     },
                //     // layers: [  // 图层
                //     //     {
                //     //         type: 'blend',  // 图层类型
                //     //         blendTo: 'emission',  // 混合至自发光
                //     //         texture: require('../../assets/earth.jpg'),  // 纹理
                //     //     },
                //     //     {
                //     //         type: 'overlay',  // 图层类型
                //     //         texture: require('../../assets/earth.jpg'),  // 纹理
                //     //         shading: 'lambert',  // 着色效果
                //     //         distance: 40,  // 图层距离
                //     //     },
                //     // ],

                // },




                series: [
                    {
                    show: true,//是否显示
                    type: 'map3D',
                    map: 'jiangxi',
                    roam: true,//是否开启鼠标缩放和平移漫游
                    boxwidth: 160,//地图的长
                    boxheight: 160,//地图的宽
                    regionHeight: 10,//3D地图的厚度
                    zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
                    // environment:require('../../assets/earth.jpg'),  // 环境贴图的反射率
                    groundPlane: {//地面
                        show: false,//是否显示
                        color: '#212e3a',//地面颜色
                    },
                    label: {//图形上的文本标签
                        show: true,
                        distance: 10,//标签距离图形的距离
                        formatter: '{b}',//标签内容格式器
                        textStyle: {
                            color: '#000'
                        }
                    },
                    itemStyle: {//地图区域的多边形 图形样式
                        // color: '#1450ce',//地图区域的颜色
                        viewControl: {
                            // projection: 'orthographic',//投影方式
                            // zlevel: 4,//所有图形的 zlevel 值
                        },
                        borderColor: '#fff', // 省份边框颜色
                        borderWidth: 1.5, // 省份边框宽度
                        shadowColor: '#fff', // 省份边框阴影rgba(100,255,238,0.5)
                        shadowBlur: 5, // 省份边框聚焦
                        areaColor: '#dcecfc',
                        // 渐变颜色
                        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                        //     offset: 0, color: '#fff' // 0% 处的颜色
                        // }, {
                        //     offset: 1, color: '#00f' // 100% 处的颜色
                        // }], false),
                        normal: {
                            areaColor: {
                                type: "linear",
                                x: 1200,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                },],
                                global: true, // 缺省为 false
                            },
                            borderColor: "#667eac",
                            borderWidth: 2,
                            emphasis: {
                                show: false,
                                color: "#1faaff",
                                areaColor: "rgba(0,254,233,0.6)",
                            },
                        },
                        // opacity: 1,//图形透明度
                        // borderWidth: 3,//描边线宽 为 0 时无描边
                        // borderColor: '#6d8cb0',//描边颜色
                        // areaColor: '#fff',//地图区域的颜色
                        // areaOpacity: 1,//地图区域的透明度
                        // shadowColor: '#1f1f1f',//阴影颜色
                        // shadowBlur: 10,//图形阴影的模糊大小
                        // shadowOffsetX: 10,//阴影水平方向上的偏移距离
                        // shadowOffsetY: 10,//阴影垂直方向上的偏移距离

                    },
                    emphasis: {//高亮状态下的多边形和标签样式
                        label: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        },
                        viewControl: {
                            projection: 'perspective',//投影方式
                            zlevel: 4,//所有图形的 zlevel 值
                        },
                        itemStyle: {
                            // color: 'rgba(81, 171, 225, .9)',
                            zlevel: 4,//所有图形的 zlevel 值
                        }
                    },
                    regions: [{//单独设置地图区域的样式
                        name: '南昌市',
                        regionHeight: 50,//3D地图的厚度
                        itemStyle: {
                            color: '[1, 1, 1, 1]',
                            borderWidth: 1,
                            borderColor: '#fff',
                        },
                        label: {//图形上的文本标签
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                    }],
                    shading: 'realistic',//着色效果
                    realisticMaterial: {//真实感材质相关配置
                        detailTexture: require('../../assets/newbg.jpg'),//地面细节纹理
                        textureTiling: 4,//纹理平铺
                        textureOffset: [1, 0],//纹理偏移
                        // nrormalsTexture: require('../../assets/earth.jpg'),//法线贴图
                        // roughnessAdjust: 1,//粗糙度调整
                        // roughness: 0.2,//粗糙度
                        // metalness: 0,//金属度
                    },
                    light: {//光照相关配置
                        main: {
                            intensity: 1,//光照强度
                            shadow: true,//是否显示阴影
                            shadowQuality: 'high',//阴影精度
                        },
                        ambient: {
                            // intensity: 0.2,//环境光强度
                        },
                    },
                    // postEffect: {//后期特效相关配置
                    //     enable: true,//是否开启后处理特效
                    //     bloom: {//高光特效相关配置
                    //         enable: true,//是否开启bloom特效 高光特效
                    //         bloomIntensity: 0.5,//高亮区域边界值 0-1
                    //     },
                    //     SSAO: {//环境光遮蔽相关配置
                    //         radius: 1,//环境光遮蔽半径
                    //         intensity: 1,//环境光遮蔽强度
                    //         enable: true,//是否开启环境光遮蔽
                    //     },
                    //     depthOfField: {//景深特效相关配置
                    //         enable: false,//是否开启景深特效
                    //         focalRange: 10,
                    //         fstop: 1,
                    //     },
                    //     colorCorrection: {//颜色校正相关配置
                    //         enable: true,//是否开启颜色校正
                    //         lookupTexture: '',//颜色校正的LUT贴图
                    //     },
                    // },
                    viewControl: {//视角控制器相关配置
                        zlevel: 1,//所有图形的 zlevel 值
                        autoRotate: false,//是否自动旋转
                        // autoRotateAfterStill: 10,//多少秒后停止自动旋转
                        // autoRotateSpeed: 10,//自动旋转速度
                        // damping: 0.8,//惯性
                        // rotateSensitivity: 0,//旋转灵敏度
                        // zoomSensitivity: 0,//缩放灵敏度
                        // panSensitivity: 0,//平移灵敏度
                        // target: [0, 0, 0],//视角中心点
                        distance: 200,//视角距离
                        // minDistance: 40,//视角最小距离
                        // maxDistance: 200,//视角最大距离
                        // alpha: 0,//视角绕x轴旋转角度
                        // beta: 0,//视角绕y轴旋转角度
                        // minAlpha: -360,//视角绕x轴旋转最小角度
                        // maxAlpha: 360,//视角绕x轴旋转最大角度
                        // minBeta: -360,//视角绕y轴旋转最小角度
                        // maxBeta: 360,//视角绕y轴旋转最大角度
                        // center: [0, 0, 0],//视角中心点
                        // animation: true,//是否开启动画
                        // animationDurationUpdate: 1000,//动画时长
                        // animationEasingUpdate: 'cubicInOut',//动画缓动效果
                    },
                }],
            };
            // -地图注册 第一个参数的名字必须和 option.geo.map一致
            echarts.registerMap('jiangxi', jiangxi)
            charts.setOption(option);
        },
    },
};
</script>
  
  